<% content_for :style do %>
  <style>
    #comparison-page td {
      vertical-align: middle;
    }

    #comparison-page .move-actions a {
      visibility: hidden;
    }

    #comparison-page .move-actions:hover a {
      visibility: visible;
    }
  </style>
<% end %>
<% content_for :script do %>
  <script>
    function submitForm() {
      $j('#compare-form').submit();
    }

    function moveLeft(index) {
      sids = $j('#sids').val().split(',');
      idToLeft = sids[index];
      idToRight = sids[index - 1];
      sids.splice(index - 1, 2, [idToLeft, idToRight]);
      $j('#sids').val(sids.join(','));
      submitForm();
    }

    function moveRight(index) {
      sids = $j('#sids').val().split(',');
      idToRight = sids[index];
      idToLeft = sids[index + 1];
      sids.splice(index, 2, [idToLeft, idToRight]);
      $j('#sids').val(sids.join(','));
      submitForm();
    }

    function moveUp(index) {
      metrics = $j('#metrics').val().split(',');
      idToUp = metrics[index];
      idToBottom = metrics[index - 1];
      metrics.splice(index - 1, 2, [idToUp, idToBottom]);
      $j('#metrics').val(metrics.join(','));
      submitForm();
    }

    function moveDown(index) {
      metrics = $j('#metrics').val().split(',');
      idToBottom = metrics[index];
      idToUp = metrics[index + 1];
      metrics.splice(index, 2, [idToUp, idToBottom]);
      $j('#metrics').val(metrics.join(','));
      submitForm();
    }

    function removeFromList(index, inputField) {
      value = inputField.val().split(',');
      value.splice(index, 1);
      inputField.val(value.join(','));
      submitForm();
    }
  </script>
<% end %>


  <div id="comparison-page">
    <form method="GET" id="compare-form" action="<%= ApplicationController.root_context -%>/comparison/index">
      <input type="hidden" name="sids" id="sids" value="<%= @snapshots.map { |s| s.id.to_s }.join(',') -%>">
      <input type="hidden" name="metrics" id="metrics" value="<%= @metrics.map { |m| m.key }.join(',') -%>">

	  <div style="margin-bottom: 4px">
          <div id="metric_div" style="display: inline-block">
            <%= metric_select_tag 'new_metric', @metric_to_choose, {
              :allow_empty => true,
              :select2_options => {'placeholder' => "'" + message('comparison.add_metric') + "'"}
            } -%>
            <script>
              // we don't want this parameter to be submitted, so we set its name to ''
              $j('#new_metric').attr('name', '');
              $j('#new_metric').change(function (event) {
                var metric = event.target.value;
                if (metric != null) {
                  var currentMetrics = $j('#metrics').val();
                  if (currentMetrics.length > 0) {
                    currentMetrics += ',';
                  }
                  currentMetrics += metric;
                  $j('#metrics').val(currentMetrics);
                  $j('#compare-form').submit();
                }
              });
            </script>
          </div>
          
          <div id="resource_div" style="display: inline-block; margin-left: 30px">
            <%= resource_select_tag 'new_resource', {
              :resource_type_property => 'comparable',
              :width => '250px',
              :select2_options => {'placeholder' => "'" + message('comparison.add_project') + "'"}
            } -%>
            <script>
              // we don't want this parameter to be submitted, so we set its name to ''
              $j('#new_resource').attr('name', '');
              $j('#new_resource').change(function (event) {
                var id = event.target.value;
                if (id != null) {
                  $j('#version_loading').show();
                  $j.ajax({
                    type:'GET',
                    url:'<%= ApplicationController.root_context -%>/comparison/versions?resource='
                      + id + '&sids='
                      + $j('#sids').val(),
                    success:function (data) {
                      $j('#new_version').html(data);
                      $j('#new_version').select2({placeholder:'<%= message('comparison.select_version') -%>'});
                      $j('#version_loading').hide();
                      $j('#version_div').show();
                      $j('#version_div').css("display", "inline-block");
                      $j('#new_version').select2("focus");
                    }
                  });
                }
              });
              $j('#new_resource').select2("focus");
            </script>
          </div>

          <span id="version_loading" class="loading" style="display: none"></span>

          <div id="version_div" style="display: none">
            <select id="new_version">
            </select>
            <script>
              $j('#new_version').change(function (event) {
                var id = event.target.value;
                if (id != null) {
                  var currentSnapshotIds = $j('#sids').val();
                  if (currentSnapshotIds.length > 0) {
                    currentSnapshotIds += ',';
                  }
                  currentSnapshotIds += id;
                  $j('#sids').val(currentSnapshotIds);
                  $j('#compare-form').submit();
                }
              });
            </script>
          </div>
	    
	  </div>

      <table class="data">
        <thead>
          
          <tr id="edit-columns-header">
            <th></th>            
            <%
               last_index = @snapshots.size-1
               @snapshots.each_with_index do |s, index|
            %>
            <th class="thin move-actions" style="padding: 5px !important;">
              <table>
                <tr>
                  <td style="vertical-align: bottom;">
                    <% if index > 0 %>
                      <a class="icon-move-left" href="#" onclick="moveLeft(<%= index -%>)" id="left-<%= index -%>"></a>
                    <% else %>
                      <img src="<%= ApplicationController.root_context -%>/images/transparent_16.gif"/>
                    <% end %>
                  </td>
                  <td style="text-align: center; min-width: 100px">
                    <div style="width: 100%; text-align: center;">
                      <a class="icon-delete" href="#" onclick="removeFromList(<%= index -%>, $j('#sids'))" id="del-r-<%= index -%>" title="<%= message('comparison.suppress_column') -%>"></a>
                    </div>
                  </td>
                  <td style="vertical-align: bottom;">
                    <% if index < last_index %>
                      <a class="icon-move-right" href="#" onclick="moveRight(<%= index -%>)" id="right-<%= index -%>"></a>
                    <% else %>
                      <img src="<%= ApplicationController.root_context -%>/images/transparent_16.gif"/>
                    <% end %>
                  </td>
                </tr>
              </table>
            </th>
            <% end %>            
            <th></th>
          </tr>    
          <tr id="resource-info-header">
            <th></th>
            <%
               last_index = @snapshots.size-1
               @snapshots.each_with_index do |s, index|
                 event = s.event(EventCategory::KEY_VERSION)
            %>
              <th style="text-align: center; vertical-align: top; line-height: 1.5;">
                <span class="no-transform">
                  <a href="<%= ApplicationController.root_context -%>/dashboard/index/<%= s.resource.key -%>"><%= h s.resource.name(true) -%></a>
                  <br/>
                  <span class="note"><b><%= event ? event.name : message('comparison.version.latest') -%></b></span>
                  <br/>
                  <span class="note"><%= human_short_date s.created_at -%></span>
                </span>
              </th>
            <% end %>
            <th></th>
          </tr>      
        </thead>

        <tbody>
        <%
           last_index = @metrics.size-1
           @metrics.each_with_index do |m, index|
        %>
          <tr class="<%= cycle 'even', 'odd' -%> move-actions">
            <td class="thin">
              <table>
                <tr>
                  <td class="nowrap" style="vertical-align: bottom; width: 100%;"><%= m.short_name -%></td>
                  <td class="nowrap" style="padding-left: 10px">
                    <% if index > 0 %>
                      <a class="icon-move-up" href="#" onclick="moveUp(<%= index -%>)" id="up-<%= index -%>"></a>
                    <% end %>
                    <% if index < last_index %>
                      <a class="icon-move-down" href="#" onclick="moveDown(<%= index -%>)" id="down-<%= index -%>"></a>
                    <% end %>
                    <a class="icon-delete" href="#" onclick="removeFromList(<%= index -%>, $j('#metrics'))" id="del-m-<%= index -%>" title="<%= message('comparison.suppress_line') -%>"></a>
                  </td>
                </tr>
              </table>
            </td>

            <% @snapshots.each do |s| %>
              <td style="text-align: center">
                <%= format_measure s.measure(m) -%>
              </td>
            <% end %>
            
            <td></td>
          </tr>
        <% end %>
        </tbody>
      </table>
    </form>
  </div>
